<template>
  <div class="user-information">
    <!-- 导航栏 -->
    <mt-header fixed
               class="header">
      <router-link to="/"
                   slot="left">
        <mt-button icon="back">
          <span class="header-text">个人资料</span>
        </mt-button>
      </router-link>
    </mt-header>
    <!-- 中间 -->
    <van-form class="container"
              @submit="onSubmit"
              ref="UserInformationForm">
      <van-cell-group>
        <input type="file"
               hidden
               ref="file"
               @change="onFileChange">
        <van-cell title="头像"
                  class="avatar"
                  @click="$refs.file.click()"
                  is-link>
          <van-image round
                     class="img-avatar"
                     :src="userinfoList.avatar"
                     width="50px"
                     height="50px"
                     fit="cover" />
        </van-cell>
        <van-field clearable
                   name="username"
                   v-model="userinfoList.name"
                   :rules="UserInformationRules.username"
                   type="text"
                   label="姓名" />
        <van-cell title="性别:"
                  readonly
                  clickable
                  name="picker"
                  v-model="userinfoList.gender"
                  @click="isUserGenderShow = true"
                  is-link />
        <van-popup v-model="isUserGenderShow"
                   position="bottom">
          <van-picker show-toolbar
                      :columns="columns"
                      @confirm="onConfirm"
                      @cancel="isUserGenderShow=false" />
        </van-popup>
        <van-field clearable
                   name="mobile"
                   v-model="userinfoList.mobile"
                   :rules="UserInformationRules.mobile"
                   type="number"
                   placeholder="请输入手机号码"
                   maxlength="11"
                   label="手机号码:" />
        <van-cell title="服务区域:"
                  v-model="userinfoList.area"
                  clickable
                  name="area"
                  @click="isUserInformationArea = true"
                  is-link />
        <van-popup v-model="isUserInformationArea"
                   position="bottom">
          <van-area :area-list="areaList"
                    @confirm="onConfirmTwo"
                    @cancel="isUserInformationArea = false" />
        </van-popup>
        <van-field clearable
                   name="address"
                   v-model="userinfoList.address"
                   placeholder="请输入详细地址"
                   :rules="UserInformationRules.address"
                   type="text"
                   label="详细地址:" />
        <van-field clearable
                   name="code"
                   type="number"
                   maxlength="6"
                   :rules="UserInformationRules.code"
                   v-model="code"
                   placeholder="请输入验证码"
                   label="手机验证码:">
          <template #button>
            <van-button size="mini"
                        color="#1196db"
                        native-type="button">获取验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <!-- 底部按钮 -->
      <div class="next"
           @click="onSubmit">保存
      </div>
      <!-- 编辑头像 -->
      <van-popup v-model="isUserAvatarShow"
                 position="bottom"
                 style="height: 100%;">
        <user-avatar v-if="isUserAvatarShow"
                     :img="img"
                     @update-photo="userinfoList.avatar = $event"
                     @close="isUserAvatarShow=false"></user-avatar>
      </van-popup>
    </van-form>
  </div>
</template>
<script>

import UserAvatar from './components/user-avatar.vue'
// 导入处理省市的文件
import AeraList from '../../utils/area.js'
import { getUserInFormation, updateUserInFormation } from '@/api/UserInformation.js'
import { getItem, setItem } from '@/mock/jjw.js'
export default {
  name: 'UserInformation',
  components: { UserAvatar },
  data () {
    return {
      userinfoList: {},
      code: '',
      img: null,
      UserInformationRules: {
        username: [{
          required: true,
          message: '姓名不能为空'
        }, {
          pattern: /^[\u4e00-\u9fa5]{2,6}$/,
          message: '姓名格式不正确'
        }],
        mobile: [{
          required: true,
          message: '手机号码不能为空'
        }, {
          pattern: /^1[3|5|7|8|9]\d{9}$/,
          message: '手机号码格式不正确'
        }],
        address: [{
          required: true,
          message: '地址不能为空'
        }, {
          pattern: /^.+小区.+单元.+(室|户).*$/,
          message: '地址格式不正确'
        }],
        code: [{
          required: true,
          message: '验证码不能为空'
        }, {
          pattern: /^\d{6}$/,
          message: '验证码错误'
        }]
      },
      isUserGenderShow: false,
      isUserInformationArea: false,
      isUserAvatarShow: false,
      columns: ['男', '女'],
      // area省市区
      areaList: AeraList
    }
  },
  created () {
    this.loadUserInfo()
  },
  mounted () {

  },
  methods: {
    // 获取数据
    async loadUserInfo () {
      try {
        const { data } = await getUserInFormation()

        getItem('zhongqinghua')
        console.log(getItem('zhongqinghua'));
        const getlist = getItem('zhongqinghua')
        console.log(data.list)
        const listo = data.list
        listo.mobile = getlist.userphone
        listo.name = getlist.nicheng
        this.userinfoList = listo
        console.log(this.userinfoList)
      } catch (err) {
        this.$toast('获取数据失败')
      }
    },
    // 提交表单事件
    async onSubmit () {
      try {
        await this.$refs.UserInformationForm.validate()
      } catch (err) {
        return console.log('验证失败', err)
      }
      const userinfo = {
        avatar: this.userinfoList.avatar,
        name: this.userinfoList.name,
        gender: this.userinfoList.gender,
        mobile: this.userinfoList.mobile,
        area: this.userinfoList.area,
        address: this.userinfoList.address,
        code: this.code
      }
      try {
        await updateUserInFormation(userinfo)
        this.$toast('保存成功')
        this.$router.push('/')
      } catch (err) {
        return console.log('失败,请查明原因', err)
      }
    },
    // 更换头像
    onFileChange () {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.img = reader.result
        // 关闭弹出框
        this.isUserAvatarShow = true
        // file-input 如果选了同一个文件不会触发 change 事件
        // 解决办法就是每次使用完毕，把它的 value 清空
        this.$refs.file.value = ''
      }
    },
    // 第一个选择器
    onConfirm (value) {
      this.userinfoList.gender = value
      this.isUserGenderShow = false
    },
    // 第二个选择器
    onConfirmTwo (value) {
      const arr = value
      const SelectProvinceName = arr[0].name // 省
      const SelectCityName = arr[1].name // 市
      const SelectCountyName = arr[2].name // 区
      this.servicearea = [SelectProvinceName + SelectCityName + SelectCountyName]
      this.userinfoList.area = this.servicearea.join('')
      this.isUserInformationArea = false
    }
  }
}
</script>

<style scoped lang="less">
.user-information {
  position: relative;
  .header {
    height: 120px;
    line-height: 40px;
    background-color: #1196db;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    /deep/ .header-text {
      font-size: 32px;
    }
  }
  .container {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    height: 770px;
  }
  .avatar {
    height: 140px;
    line-height: 140px;
    /deep/ .van-cell__left-icon,
    .van-cell__right-icon {
      line-height: 100px;
    }
  }
  /deep/ .van-cell__title {
    color: #000;
    font-size: 26px;
  }
  /deep/ .van-cell__value {
    span {
      color: #000;
    }
  }
  .next {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 110px;
    line-height: 110px;
    text-align: center;
    font-size: 28px;
    color: #ffffff;
    background-color:#1196db;
  }
  /deep/.van-button__content {
    span {
      color: #ffffff;
    }
  }
}
</style>
